<template>
	<div class="pageRight textLeft">
		<div class="boxTop">
			<i class="iconfont icon-onlineUsers"></i>
			<span class="marginR5 marginL5">在线人数</span> {{onlineUsersLength}}
		</div>
		<div class="boxMiddleOne">
			<div :class="{'boxMiddleBox':onlineUsers.length>3,'boxMiddle':true,'scrollbarOverflow':true}">
				<template v-if="onlineUsersLength">
					<div :class="{'item':true,'itemMain':value.Id==storeUserinfo.Id}" v-for="value,index in onlineUsers"
						:key="value.Id">
						<div class="itemLeft">
							<span class="numberCls" :class="{'numberCls1':++index==1}">{{index}}</span>
							<div class=" fromPhoto " :class="{'fromPhoto1':index==1}">
								<el-image class="myavater" style="width: 40px;height: 40px;border-radius: 50%;"
									:src="value.url+'?w=40&h=40&q=75'" fit="fill">
									<div slot="error" class="image-slot">
										<el-image style="width: 40px;height: 40px;border-radius: 50%;"
											src="https://imageserve.ctrlikun.com/images/root.webp" fit="fill">
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline" style="font-size: 40px;"></i>
											</div>
										</el-image>
									</div>
								</el-image>

							</div>
							<span class="spanCls username overflow">{{value.username}}</span>

						</div>
						<span class="spanCls Integral">{{value.Integral}}</span>
						<div class="itemRight">
							<div class="" v-show="value.gender">
								<i class="el-icon-male" style="color: #00f;font-size: 18px;"></i>
							</div>
							<div class="" v-show="!value.gender">
								<i class="el-icon-female" style="color: #ff58b5;font-size: 18px;"></i>
							</div>
							<div class="boxRight" v-show="value.Id!=storeUserinfo.Id && value.iscontacts!=1">
								<el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
									icon-color="green" :title="`向[${value.username}]发送添加好友请求？`"
									@confirm="handlerAdd(value.Id)">
									<el-button slot="reference" type="primary" icon="el-icon-plus" circle
										size="mini"></el-button>
								</el-popconfirm>
							</div>
						</div>

					</div>
				</template>
				<template v-else>
					<div class="noneClass">
						网络错误...
					</div>
				</template>
			</div>
		</div>
		<div class="boxBottom textCenter color-smill scrollbarOverflow overHid" ref="rightScrollBox">
			<div class="main">
				<div class="font14">
					{{onlineTime}}
				</div>
				<span>欢迎 <strong>{{storeUserinfo.username}}</strong> 进入聊天室</span>
				<div class="marginT15 textLeft marginL5" v-for="key,index in stautsList" :key="index">
					<div class="font14">{{key.onlineTime}}</div>
					<span> <strong>{{key.username}}</strong> <i
							:style="`color:${key.color?'#00ff00':'#ff0000'} ;`">{{key.msg}}</i> 聊天室</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		debounce
	} from "@/utils/common.js";
	import {
		getdate
	} from "@/utils/base"
	import {
		creatContacts
	} from "@/api/relationshipUser"
	import Storage from "@/utils/session.js"
	export default {
		name: "pageRight",
		props: {

		},
		data() {
			return {
				stautsList: [],
				onlineUsers: [],
				onlineUsersList: {},
				onlineUsersLength: 0,
				activeItem: {
					msg: ""
				},
				userInfo: {
					Id: "",
					url: "",
					username: ""
				},
				onlineTime: getdate(), //登录时间
			}
		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo || JSON.parse(Storage.getSession())
			},
			newMessage() {
				return this.$store.getters.newMessage
			},

		},
		methods: {
			//根据积分排序
			handlerOrder(arr) {
				if (arr.length == 1) {
					return arr;
				}
				for (let i = 0; i < arr.length; i++) {
					for (let j = 0; j < arr.length - i - 1; j++) {
						let temp = arr[j + 1];
						if (arr[j].Integral < arr[j + 1].Integral) {
							arr[j + 1] = arr[j]
							arr[j] = temp;
						}
					}
				}
				return arr;
			},
			//是否是联系人
			handleIscontacts(arr, length) {
				let userlist = this.$store.getters.userlist; //用户联系人列表
				for (let i = 0; i < length; i++) {
					if (userlist.includes(arr[i].Id)) {
						arr[i].iscontacts = 1;
					}
				}
				return arr;
			},
			//夹带msg版本
			// // 隐藏
			// handlerAddHidden(vid) {
			// 	// this.$refs[`addVisible${vid}`].showPopper = false;
			// 	this.$refs[`addVisible${vid}`] = false;
			// },
			// //显示
			// handlerAddShow(vid) {
			// 	this.$refs[`addVisible${vid}`] = true;
			// 	// this.$refs[`addVisible${vid}`].showPopper = true;
			// },

			handlerAdd: debounce(function(uid) {

				let obj = {
					otherId: uid, //目标
					msg: `请求添加你为好友`, //v1版 默认值 用户的备注
				}
				//请求数据库加通讯
				creatContacts(obj).then(data => {
					this.$notify({
						title: '系统消息',
						message: data.message,
						type: 'success'
					});
				})
			}),
			formdataSetArray(obj) {
				let arr = Object.values(obj)
				this.onlineUsersLength = arr.length
				this.onlineUsers = this.handleIscontacts(this.handlerOrder(arr), this.onlineUsersLength);
				this.$store.commit("setUserCount", this.onlineUsersLength)
				this.$store.commit("setOnlineUsers", this.onlineUsers)
			}
		},
		watch: {
			"newMessage": {
				deep: true, // 深度监听
				immediate: true, // 页面初始化时是否触发回调
				handler: function(newVal, oldVal) { // 监听属性的回调方法
					// if (!this.$store.getters.isExecute) return
					//判断消息类型
					let type = newVal.type;
					if (type === 3) {
						
						if (typeof newVal.data == 'object') {
							this.onlineUsersList = Object.assign({}, newVal.data)
							this.formdataSetArray(this.onlineUsersList);
						}
						if (newVal.Id == this.storeUserinfo.Id) {
							return;
						} else {
							let str = "下";
							let msg = '离开';
							if (newVal.status) {
								str = "上"
								msg = '进入';
								// this.$notify({
								// 	title: '系统消息',
								// 	message: `用户:[${newVal.username}]${str}线啦`,
								// 	type: 'success',
								// 	duration: 1200
								// });
							} else {
								// this.$notify({
								// 	title: '系统消息',
								// 	message: `用户:[${newVal.username}]${str}线啦`,
								// 	position: 'bottom-right'
								// });
							}

							this.stautsList.push({
								username: newVal.username,
								onlineTime: newVal.onlineTime,
								msg: msg,
								color: newVal.status
							})
							this.$nextTick(() => {
								this.$refs.rightScrollBox.scrollTop = this.$refs.rightScrollBox.scrollHeight;
							})
						}

					} else if (type == 33) {
						//有用户修改信息 更新积分榜信息
						if (typeof newVal.data == 'object') {
							this.onlineUsersList[newVal.Id] = newVal.data
							this.formdataSetArray(this.onlineUsersList);
						}
					}
				},

			}
		}
	}
</script>

<style scoped>
	.pageRight {
		width: 28%;
		min-width: 200px;
		min-height: 641px;
		max-height: calc(100vh - 76px);
		background-color: #fff;
		border-radius: 8px;
		padding: 8px;
		box-sizing: border-box;
		box-shadow: -1px 1px 5px #ccc;

	}

	.boxTop {
		width: 100%;
		height: 45px;
		line-height: 45px;

		font-size: 18px;
		border-radius: 8px 8px 0 0;
	}


	.boxMiddleOne {
		position: relative;
	}

	.boxMiddle {
		position: absolute;
		/* background-color: #CDF5FD; */
		width: 100%;
		height: 200px;
		overflow-x: hidden;
		overflow-y: auto;
		transition-duration: 0.7s;
		border: 1px solid #CDF5FD;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.boxMiddleBox:hover {
		height: 400px;
		background-color: #f1f1f1;
	}

	.boxBottom {
		margin-top: 200px;
		padding-top: 15px;
		min-height: 360px;
		max-height: calc(100% - 265px);
	}

	.noneClass {
		text-align: center;
		color: #ccc;
		line-height: 200px;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;

	}

	.itemMain {
		background-color: #dbfcff;
	}

	.itemLeft {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.itemLeft .username {
		width: 125px;
	}

	.itemRight {
		display: flex;
		width: 75px;
		align-items: center;
		justify-content: space-between;
	}

	.item:hover {
		cursor: pointer;
		background-color: #CDF5FD;
	}

	.item:hover .numberCls {
		/* background-color: #A0E9FF; */
	}

	.numberCls {
		display: inline-block;
		width: 32px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		background-color: #CDF5FD;
		border-radius: 50%;
	}

	.numberCls1 {
		/* background-color: #ff0000; */
		/* background-color: #ffff7f; */
	}

	.fromPhoto {
		margin-left: 10px;

	}

	.fromPhoto1 {
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		background-image: url('../../assets/border.jpg');
		background-position: 120% 120%;
		background-size: cover;
		background-repeat: no-repeat;
		mix-blend-mode: multiply;
	}

	.fromPhoto1 .myavater {
		margin: 9px 1px 0 0;
	}

	.spanCls {
		display: inline-block;
	}

	.username {
		margin: 0 8px;
	}
</style>